<style lang='less'>
  .back-img {
    background-image: url('../../../assets/yiqing/hs-back2.png');
    background-position: center;
  }
  .back-img2 {
    background-image: url('../../../assets/yiqing/hs-back1.png');
    background-position: center;
  }
  .back-img1 {
    background-image: url('../../../assets/yiqing/hs-back3.png');
    background-position: center;
  }
  .tips-menu-v31 .desc {
    font-size: 16px;
    font-weight: 500;
    // margin-bottom: 5px;
    // margin-top: 5px;
  }
</style>
<template>
    <div>
    <Row :gutter="16" class="tips-menu-v31">
      <Col span="8">
      <Card style="" class="back-img1">
        <div style="text-align:center">
            <div class="desc"><span style="color:white">累计采样：</span><span style="color:red;font-size:20px"> {{staticsObj.ljcy || 0}} </span><span style="color:white">人</span></div>
        </div>
      </Card>
      </Col>
      <Col span="8">
      <Card style="" class="back-img2">
        <div style="text-align:center">
            <div class="desc"><span style="color:white">采集样品：</span><span style="color:red;font-size:20px"> {{staticsObj.cjyp || 0}} </span><span style="color:white">份</span></div>
        </div>
      </Card>
      </Col>
      <Col span="8">
      <Card style="" class="back-img">
        <div style="text-align:center">
            <div class="desc"><span style="color:white">送检样品：</span><span style="color:red;font-size:20px"> {{staticsObj.sjyp || 0}} </span><span style="color:white">人</span></div>
        </div>
      </Card>
      </Col>
      <!-- <Col span="8">
        <router-link to="">
          <div class="nc">
            <div class="desc">
              采集样品
            </div>
            <div class="num">{{accountingNum.remain_num || 0}}份</div>
          </div>
        </router-link>
      </Col>
      <Col span="8">
        <router-link to="">
          <div class="ic">
            <div class="desc">
              送检样品
            </div>
            <div class="num">{{accountingNum.all_num || 0}}份</div>
          </div>
        </router-link>
      </Col> -->
    </Row>
    <Form ref="selectObj" inline class="on-site-v3">
      <FormItem style="width:8%">
        <Button @click="handleSelectAll(true)" style="margin-left:0px">设置全选</Button>
      </FormItem>
      <FormItem style="width:8%">
        <Button @click="handleSelectAll(false)">取消全选</Button>
      </FormItem>
      <FormItem style="width:8%">
        <Button @click="inspection()">送检</Button>
      </FormItem>
      <FormItem label="样品编号" prop="sample_code" style="width:24%">
        <Input v-model="params.sample_code" class="div-search" placeholder="请输入样品编号"></Input>
      </FormItem>
      <FormItem label="送检状态" style="width:24%">
        <Select v-model="params.sample_status" class="div-search" placeholder="请选择送检状态">
          <Option value="">全部</Option>
          <Option value="0">未送检</Option>
          <Option value="1">已送检</Option>
        </Select>
      </FormItem>
      <FormItem style="width:150px;margin-left:50px">
        <Button type="primary" @click="search()" class="search-btn"><Icon type="ios-search" />搜索</Button>
      </FormItem>
    </Form>
    </Row>
    <Table border :columns="columns1" ref="selection" :data="data1" @on-selection-change="changeSelect">
      <template slot-scope="{ row }" slot="sample_status">
        <span v-if="row.sample_status == '0'">未送检</span>
        <span v-if="row.sample_status == '1'">已送检</span>
      </template>
    </Table>
    <Page class="page_style" :total="totalnum" :current="currentPageNo"
              :page-size="currentPageSize" @on-change="changePageNo" show-total  show-sizer @on-page-size-change="size"/>
    <Modal v-model="personShow" title="检测人明细" width="700" :closable="false">
      <Table border :columns="columns2" :data="data2"></Table>
    </Modal>
    <Modal v-model="inspectionShow" title="送检机构" @on-ok="okInspect" @on-cancel="cancelInspect" width="700" :closable="false">
      <Form label-position="right" :label-width="100">
        <Row class="mb20">
          <Col span="7" class="ivu-form-item-label">送检机构：</Col>
          <Col span="14" class="ivu-form-item-content">
            <Select v-model="FormItem.send_company_name">
              <Option :value="obj.value" v-for="obj in inspectionArr" v-bind:key="obj.value">{{obj.label}}</Option>
            </Select>
          </Col>
        </Row>
      </Form>
    </Modal>
      <div style="display: none">
        <div class="qrcode" ref="qrCodeUrl" id="srcdd"></div>
        <img id="barcode" />
      </div>
    </div>
</template>

<script>
import './index.less'
import { getSampleList, getSampleCountInfo, getSamplePersonList, updateSampleStatus1, deleteSample } from '@/api/nucleic-acid-detection'
import { getLodop } from '../../nucleic-acid-detection/components/LodopFuncs'
// import { getSampleList, getSampleCountInfo, getSamplePersonList, updateSampleStatus1 } from '@/api/nucleic-acid-detection'
import QRCode from 'qrcodejs2'
import JsBarcode from 'jsbarcode'
export default {
  data () {
    return {
      sample_code: '',
      FormItem: {},
      personShow: false,
      inspectionShow: false,
      selectionList: [],
      staticsObj: {},
      row: '',
      accountingNum: {},
      searchInfo: {
        totalnum: 0,
        currentPageNo: 1,
        currentPageSize: 10
      },
      currentPageNo: 1,
      currentPageSize: 10,
      totalnum: 0,
      params: { pageNo: 1, pageSize: 10 },
      data1: [],
      columns1: [
        { type: 'selection', width: 60, align: 'center' },
        // { title: '选择',
        //   key: '',
        //   width: '80',
        //   align: 'center',
        //   render: (h, params) => {
        //     // var self = this
        //     const row = params.row
        //     let power = row.sample_status
        //     if (row.sample_status === '1') {
        //       return h('Checkbox', {
        //         props: {
        //           value: '1'
        //         },
        //         on: {
        //           click: () => {
        //             console.log(power, 'power')
        //           }
        //         }
        //       })
        //     }
        //   }
        // },
        { title: '状态', slot: 'sample_status', width: '80', align: 'center' },
        { title: '样品编号', key: 'sample_code', align: 'center' },
        { title: '采样时间', key: 'sample_date', width: '200', align: 'center' },
        { title: '采样机构', key: 'company_name', align: 'center' },
        { title: '送检机构', key: 'send_company_name', align: 'center' },
        { title: '包含数量', key: 'count', align: 'center', width: '80' },
        { title: '操作',
          key: 'cardno',
          width: '330',
          align: 'center',
          render: (h, params) => {
            let temp = []
            temp.push(
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.detailed(params.row)
                  }
                }
              }, '明细'),
              h('Button', {
                props: {
                  type: 'success',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    document.getElementById('srcdd').innerHTML = ''
                    document.getElementById('barcode').innerHTML = ''
                    this.print(params.row.sample_code, '1')
                  }
                }
              }, '打印二维码'),
              h('Button', {
                props: {
                  type: 'success',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    document.getElementById('srcdd').innerHTML = ''
                    document.getElementById('barcode').innerHTML = ''
                    this.print(params.row.sample_code, '2')
                  }
                }
              }, '打印条形码')
            )
            if (params.row.sample_status === '0') {
              temp.push(
                h('Button', {
                  props: {
                    type: 'warning',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.additional(params.row)
                    }
                  }
                }, '追加')
              )
            }
            if (params.row.sample_status === '0') {
              temp.push(
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.saveState(params.row)
                    }
                  }
                }, '送检')
              )
            }
            if (params.row.count === 0) {
              temp.push(
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.deleteSample(params.row)
                    }
                  }
                }, '删除')
              )
            }
            return h('div', temp)
          }
        }
      ],
      columns2: [
        { title: '序号', type: 'index', width: 60, align: 'center' },
        { title: '姓名', key: 'name', width: '80', align: 'center' },
        { title: '证件号码', key: 'card_no', align: 'center' },
        { title: '联系电话', key: 'mobile', align: 'center' },
        { title: '详细地址', key: 'address', align: 'center' }
      ],
      data2: [], // 送检人明细列表
      inspectionArr: [
        {
          label: '和平区检测机构',
          value: '和平区检测机构'
        },
        {
          label: '沈河区检测机构',
          value: '沈河区检测机构'
        },
        {
          label: '大东区检测机构',
          value: '大东区检测机构'
        },
        {
          label: '皇姑区检测机构',
          value: '皇姑区检测机构'
        },
        {
          label: '铁西区检测机构',
          value: '铁西区检测机构'
        },
        {
          label: '浑南区检测机构',
          value: '浑南区检测机构'
        },
        {
          label: '于洪区检测机构',
          value: '于洪区检测机构'
        },
        {
          label: '苏家屯区检测机构',
          value: '苏家屯区检测机构'
        },
        {
          label: '辽中县检测机构',
          value: '辽中县检测机构'
        },
        {
          label: '康平县检测机构',
          value: '康平县检测机构'
        },
        {
          label: '法库县检测机构',
          value: '法库县检测机构'
        },
        {
          label: '新民市检测机构',
          value: '新民市检测机构'
        }
      ],
      flag: ''
    }
  },
  methods: {
    handleSelectAll (status) {
      this.$refs.selection.selectAll(status)
    },
    changeSelect (item) {
      this.selectionList = item
    },
    saveState (item) { // 单选送检
      this.inspectionShow = true
      this.sample_code = item.sample_code
      this.FormItem.send_company_name = ''
      this.flag = 'single'
    },
    okInspect () { // 确定送检
      if (this.flag === 'single') {
        updateSampleStatus1({ sample_codes: this.sample_code, send_company_name: this.FormItem.send_company_name }).then(res => {
          if (res.data.errcode === 0) {
            this.$Notice.success({
              title: '更新送检状态成功',
              desc: '更新送检状态成功' + res.data.data.success_num + '个样品'
            })
            this.init(this.params)
            this.getStatistics()
          } else {
            this.$Notice.error({
              title: '更新送检状态失败',
              desc: res.data.errmsg
            })
          }
        })
      } else if (this.flag === 'all') {
        var numArr = []
        for (let i = 0; i < this.selectionList.length; i++) {
          numArr.push(this.selectionList[i].sample_code)
        }
        var num = ''
        if (numArr.length > 0) {
          num = numArr.join(',')
          console.log(num, 'num')
        } else {
          this.$Notice.error({
            title: '请选择送检样品',
            desc: '请选择送检样品'
          })
        }
        console.log(num, 'num')
        updateSampleStatus1({ sample_codes: num, send_company_name: this.FormItem.send_company_name }).then(res => {
          if (res.data.errcode === 0) {
            this.$Notice.success({
              title: '更新送检状态成功',
              desc: '更新送检状态成功' + res.data.data.success_num + '个样品'
            })
            this.init(this.params)
            this.getStatistics()
          } else {
            this.$Notice.error({
              title: '更新送检状态失败',
              desc: res.data.errmsg
            })
          }
        })
      }
    },
    cancelInspect () {
      this.inspectionShow = false
    },
    deleteSample (item) { // 删除样品列表
      if (confirm('确定删除吗')) {
        deleteSample({ sample_code: item.sample_code }).then(res => {
          if (res.data.errcode === 0) {
            this.$Notice.success({
              title: '删除成功',
              desc: '删除成功'
            })
            this.init(this.params)
            this.getStatistics()
          } else {
            this.$Notice.error({
              title: '删除失败',
              desc: res.data.errmsg
            })
          }
        })
      }
    },
    inspection () { // 送检(更改状态)
      this.inspectionShow = true
      this.flag = 'all'
      this.FormItem.send_company_name = ''
    },
    search () {
      this.params.pageNo = 1
      this.init(this.params)
    },
    init (param) {
      getSampleList(param).then(res => {
        if (res.data.errcode === 0) {
          this.data1 = res.data.data.results
          for (var i = 0; i < this.data1.length; i++) {
            if (this.data1[i].sample_status === '1') {
              this.data1[i]['_disabled'] = true
            }
          }
          this.totalnum = res.data.data.totalRecord
          console.log(this.data1, '样品列表')
        } else {
          this.$Notice.error({
            title: '获取样品列表失败',
            desc: res.data.errmsg
          })
        }
      })
      // console.log('5')
      // param.pageNo = this.searchInfo.currentPageNo
      // console.log(param.pageNo, '1')
      // param.pageSize = this.searchInfo.currentPageSize
      // console.log(param.pageSize, '2')
    },
    getPersonList (sample_code) { // 获取送检人列表
      let param = {
        sample_code: sample_code
      }
      getSamplePersonList(param).then(res => {
        if (res.data.errcode === 0) {
          this.data2 = res.data.data
          console.log(this.data2, '明细列表')
        } else {
          this.$Notice.error({
            title: '获取样品列表失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    detailed (item) { // 检测人明细
      this.getPersonList(item.sample_code)
      this.personShow = true
    },
    additional (item) {
      this.$router.push({
        name: 'add-sample-number',
        params: { sample_code: item.sample_code }
      })
    },
    changePageNo (pageNo) {
      console.log(pageNo, '页数')
      this.currentPageNo = pageNo
      this.params.pageNo = pageNo
      this.init(this.params)
    },
    size (pageSize) {
      this.searchInfo.currentPageSize = pageSize
      this.changePageNo()
    },
    getStatistics () { // 统计
      getSampleCountInfo({}).then(res => {
        if (res.data.errcode === 0) {
          this.staticsObj = res.data.data
        } else {
          this.$Notice.error({
            title: '获取统计数据失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    print (text, type) {
      this.creatQrCode(text)
      // let LODOP = getLodop()
      // LODOP.PRINT_INIT('测试')
      // LODOP.ADD_PRINT_HTM(10, 55, '100%', '100%', this.imgData)
      // LODOP.PRINT_DESIGN()
      let LODOP = getLodop()
      var strBASE64Code1 = document.getElementById('srcdd').getElementsByTagName('img')[0].src
      // var strBASE64Code1 = document.getElementById('srcdd').src
      var strBASE64Code2 = document.getElementById('barcode').src
      if (strBASE64Code1 && strBASE64Code2) {
        LODOP.PRINT_INITA(3, 5, 800, 600, '')
        LODOP.SET_PRINT_PAGESIZE(1, 400, 300, '')
        LODOP.SET_SHOW_MODE('BKIMG_WIDTH', '10.05mm')
        LODOP.SET_SHOW_MODE('BKIMG_HEIGHT', '10.05mm')
        LODOP.SET_PRINT_MODE('POS_BASEON_PAPER', true)
        if (type === '1') {
          LODOP.ADD_PRINT_SETUP_BKIMG(strBASE64Code1)
        } else {
          LODOP.ADD_PRINT_IMAGE('4mm', '-0.95mm', '40.01mm', '20.01mm', strBASE64Code2)
        }
        LODOP.SET_PRINT_MODE('PRINT_NOCOLLATE', 1)
        LODOP.SET_SHOW_MODE('BKIMG_PRINT', true)
        LODOP.SET_PREVIEW_WINDOW(0, 1, 0, 800, 600, '') // 打印前弹出选择打印机的对话框
        LODOP.SET_PRINT_MODE('AUTO_CLOSE_PREWINDOW', 1) // 打印后自动关闭预览窗口
        // LODOP.PRINT_DESIGN()
        // LODOP.PRINT()
        LODOP.PREVIEW()
      } else {
        setTimeout(function () {
          console.log('base64未取到延时执行')
          console.log(strBASE64Code1, 'strBASE64Code1')
          console.log(strBASE64Code2, 'strBASE64Code2')
          LODOP.PRINT_INITA(3, 5, 800, 600, '')
          LODOP.SET_PRINT_PAGESIZE(1, 400, 300, '')
          LODOP.SET_SHOW_MODE('BKIMG_WIDTH', '10.05mm')
          LODOP.SET_SHOW_MODE('BKIMG_HEIGHT', '10.05mm')
          LODOP.SET_PRINT_MODE('POS_BASEON_PAPER', true)
          if (type === '1') {
            LODOP.ADD_PRINT_SETUP_BKIMG(document.getElementById('srcdd').getElementsByTagName('img')[0].src)
          } else {
            LODOP.ADD_PRINT_IMAGE('4mm', '-0.95mm', '40.01mm', '20.01mm', document.getElementById('barcode').src)
          }
          LODOP.SET_PRINT_MODE('PRINT_NOCOLLATE', 1)
          LODOP.SET_SHOW_MODE('BKIMG_PRINT', true)
          LODOP.SET_PREVIEW_WINDOW(0, 1, 0, 800, 600, '') // 打印前弹出选择打印机的对话框
          LODOP.SET_PRINT_MODE('AUTO_CLOSE_PREWINDOW', 1) // 打印后自动关闭预览窗口
          // LODOP.PRINT_DESIGN()
          // LODOP.PRINT()
          LODOP.PREVIEW()
        }, 1000)
      }
    },
    creatQrCode (text) {
      let qrcode = new QRCode(this.$refs.qrCodeUrl, {
        text: text,
        top: 0,
        width: 150,
        height: 150,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
      })
      JsBarcode('#barcode', text, {
        format: 'CODE128',
        lineColor: '#000',
        background: '#fff',
        width: 1,
        height: 20,
        fontSize: 14,
        displayValue: true
      })
      console.log(qrcode)
      console.log(document.getElementById('barcode'))
      console.log(document.getElementById('srcdd'))
      console.log(this.$refs.qrCodeUrl, 'qrcode')
    }
  },
  mounted () {
    this.init(this.params)
    this.getStatistics()
  }
}
</script>
<style>
  .div-search{
    width: 200px;
  }
  .form-header{
    height: 40px;
  }
  .search-btn{
    margin-left: -55px;
  }
  .page_style {
    margin-top: 10px;
    text-align: right;
  }
  .ios-search{
    text-align: left;
  }
  /* .ac {
    background: -webkit-linear-gradient(left top, #348EED , #33CCFF);
    background: -o-linear-gradient(bottom right, #348EED, #33CCFF);
    background: -moz-linear-gradient(bottom right, #348EED, #33CCFF);
    background: linear-gradient(to bottom right, #348EED , #33CCFF);
  }
  .nc {
    background: -webkit-linear-gradient(left top, #FF6666 , #FFCCCC);
    background: -o-linear-gradient(bottom right, #FF6666, #FFCCCC);
    background: -moz-linear-gradient(bottom right, #FF6666, #FFCCCC);
    background: linear-gradient(to bottom right, #FF6666 , #FFCCCC);
  }
  .ic {
    background: -webkit-linear-gradient(left top, #6699FF , #66FFFF);
    background: -o-linear-gradient(bottom right, #6699FF, #66FFFF);
    background: -moz-linear-gradient(bottom right, #6699FF, #66FFFF);
    background: linear-gradient(to bottom right, #6699FF , #66FFFF);
  }
  .desc {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 5px;
  } */
</style>
